Angular + Spring Boot fejlesztés 1.
Korábban sikeresen végigverekedtük magunkat a Spring Boot és Thymeleaf szépségein, és létrehoztunk egy weboldalt, amit jelenleg is magad előtt látsz. Felmerülhet azonban a kérdés mindenkiben, hogy fel tudjuk-e váltani a megjelenítő réteget, hogy Thymeleaf helyett mondjuk egy jóval robosztusabb front-end rendszert használjunk? Igen, lehet, kicsit körülményesebb ugyan, de az alábbiakban végigmegyünk egy alap Angular weboldal rejtelmein, ami a Sring Boot felé kapcsolódik. Az adatokat ugyanúgy egy adatbázisban tároljuk le, a JAVA oldali kód pedig nagyrészt ugyanolyan elvek szerint épül föl, mint a legutóbbi sorozatban is felépült.
A forráskódot kipakoltam ide, ahol a Student könyvtár tartalmazza a JAVA oldali kódot, a web-page pedig az Angular oldali kódot. A JAVA oldali kódon most csak átszaladunk, újdonságot a fenti linken található sorozathoz képest nem nagyon tartalmaz.
Mindenekelőtt kell nekünk egy adatbázis, a Heroku-n ha létrehozunk egy PostgreSQL adatbázist, az gyakorlásnak tökéletes is lesz nekünk. Hozzunk létre egy STUDENT nevű táblát, amely 4 mezőt fog tartalmazni: id (numeric), name (varchar), email (varchar), branch (varchar).
Innentől kezdve amire ránézhetünk a JAVA kódban, az a controller réteg:
- alapvetően a weboldalunk a localhost:8080-as porton fog üzemelni, azonban szükség van arra, hogy engedélyezzük az Angular szolgáltatásnak, hogy a JAVA által kiajánlott API-kat elérje. Mivel az Angular alapértelmezetten a 4200-as porton szolgáltat, ezért az innen érkező kéréseket a következővel engedélyezzük: @CrossOrigin(origins = "http://localhost:4200").
- a JAVA által szolgáltatott API-k alapértelmezett URL-je a http://localhost:8080/api lesz: @RequestMapping(value = "/api").
Az ezt követő url-ek pedig már specifikusan attól függ, hogy melyik API-t is szólítjuk meg:
- http://localhost:8080/api/students-list: visszaadjuk az összes tanulónkat (allstudents() metódus)
- http://localhost:8080/api/students-list/id: egy adott tanuló adatait adjuk vissza, amelyet az id-val hívunk meg (studentById() metódus)
- http://localhost:8080/api/create: egy új rekordot hozunk létre az adatbázisban (createNew() metódus)
- http://localhost:8080/api/delete/id: egy adott rekordot törlünk az adatbázisból id alapján (deleteNew() metódus)
- http://localhost:8080/api/update/id: végül pedig egy már meglévő rekord tartalmán tudunk módosítani (updateOrig() metódus)
Mielőtt fejest ugranánk az Angular oldali megvalósításba, nagyon ajánlom mindenkinek a Postman használatával a fenti API-k megfelelő működésének tesztelését, hogy biztosak legyünk abban, hogy a a folyamat JAVA és adatázis oldali része megfelelően működik. Ha mindent szépen kiteszteltünk, az Angular oldaláról is nekiállhatunk a fenti url-ek megszólításának.
De hopp! Mit is hozunk létre? Ahogy a JAVA és PostgreSQL oldalon látjuk, sok tudással nem vérteztük fel szeretett rendszerünket, és hát a front-end oldal sem lesz elszállva sok minden funkciótól. Ami viszont lesz: megjelenítjük az adatokat, amelyeket az adatbázisban tárolunk le, illetve a fentebb átnézett JAVA oldali CRUD műveletekre hozunk létre Angular oldali funkciókat a felhasználó számára. Semmi extra, de alapoknak ideális.
Folytassuk itt a következő részben, nehogy aztán infarktust kapjatok az egy oldalra jutó karakterszámtól.
